import {
  Button,
  Modal,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Flex,
  useDisclosure,
  Box,
  useMediaQuery,
} from '@chakra-ui/react';
import React from 'react';

export default function Pravila(): JSX.Element {
  const [isLargerThanPhone] = useMediaQuery('(min-width: 800px)');

  const { isOpen, onOpen, onClose } = useDisclosure();


  return (
    <>
      <Button
        onClick={onOpen}
        style={{
          border: '2px solid black',
          position: 'absolute',
          bottom: '180px',
          left: isLargerThanPhone ? '100px' : '50px',
          borderRadius: '2rem',
          width: isLargerThanPhone ? '200px' : '100px',
          height: '70px',
          fontSize: isLargerThanPhone ? '30px' : '15px',
        }}
      >
        Правила игры
      </Button>
      <Box as="form">
        <Modal isOpen={isOpen} onClose={onClose} size="xl">
          <ModalOverlay />
          <ModalContent maxW="40rem" padding="4">
            <ModalHeader
              fontSize="2xl"
              textAlign="center"
              style={{
                fontSize: '30px',
              }}
            >
              Правила игры
            </ModalHeader>{' '}
            <ModalCloseButton />
            <ModalFooter>
              <Flex justifyContent="center" width="100%" fontSize = {isLargerThanPhone ? "29px" : "20px"}>
                <p>
                  Как участвовать в игре:
                  <br />
                  - Выберите тему и поделитесь ссылкой/QR c друзьями.
                
                  <br />
                  - На каждый вопрос дано 15 сек, затем вопрос меняется
                  <br />
                  - По окончании игры вам будет показан лидерборд.
                </p>
              </Flex>
            </ModalFooter>
          </ModalContent>
        </Modal>
      </Box>
    </>
  );
}
